<template>
  <div class="merak-container-has-aside supplier-gtin" curPageName="supplierGtin">
    <!-- 左侧 -->
    <div class="merak-aside">
      <div class="title">{{ $t("base_markings.tag_goods") }}</div>
      <el-input v-model="filterText" :placeholder="$t('merak.placeholder_filter')" />
      <div class="tree-wrapper">
        <el-scrollbar>
          <el-tree
            v-if="reloadBool"
            ref="treeRef"
            :data="treeData"
            node-key="value"
            :props="defaultProps"
            :default-checked-keys="defaultCheckedKeys"
            :current-node-key="currentId"
            default-expand-all
            :filter-node-method="filterNode"
            highlight-current
            @node-click="handleNodeClick"
          />
        </el-scrollbar>
      </div>
    </div>
    <!-- 右侧 -->
    <div v-waterMarker class="merak-card merak-container-has-search">
      <!-- 高级搜索弹窗 -->
      <searchBarCompoent
        ref="searchBarEle"
        :placeholder="$t(`base_markings.gtin_serch_placeholder`)"
        searchName="type_name"
        v-model="searchFormData"
        @search-event="searchData"
      >
        <!-- 高级搜索弹出框 插槽-->
        <template #searchForm="searchProp">
          <!--  高级搜索弹出框内容-->
          <div class="modal-content">
            <div class="modal-title"></div>
            <div class="modal—body">
              <el-scrollbar height="100%">
                <div class="scrollbar-content">
                  <!-- 已选参数 组件-->
                  <selectedParams v-model="searchFormData" label="label" val="value" option-key="options"></selectedParams>
                  <!-- 表单 -->
                  <el-form ref="serachFormRef" :model="searchFormData" label-position="top" class="search-form">
                    <el-row :gutter="40">
                      <el-col :span="langEnv">
                        <el-form-item :label="searchFormData.our_company.label" prop="our_company.value">
                          <!-- 申请公司性质-我司，外部俄文，1我司 2外部 -->
                          <el-radio
                            v-model="searchFormData.our_company.value"
                            :value="$t(`base_markings.our_company_label`)"
                            @change="changeOurCompany"
                            >{{ $t(`base_markings.our_company_label`) }}</el-radio
                          >
                          <el-radio
                            v-model="searchFormData.our_company.value"
                            :value="$t(`base_markings.external_label`)"
                            @change="changeOurCompany"
                            >{{ $t(`base_markings.external_label`) }}</el-radio
                          >
                        </el-form-item>
                      </el-col>
                      <el-col :span="langEnv">
                        <el-form-item :label="searchFormData.import_company_id.label" prop="import_company_id.value">
                          <!-- 标签申请公司 -->
                          <el-select
                            class="qf_select"
                            popper-class="own_popper"
                            filterable
                            v-model="searchFormData.import_company_id.value"
                            :placeholder="searchFormData.import_company_id.placeholder"
                            @visible-change="getImportCompanyId($event, 'import_company')"
                            remote
                            :remote-method="remoteMethod"
                            :loading="remoteLoading"
                          >
                            <el-option
                              v-for="item in import_companyArr"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value.toString()"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="langEnv">
                        <el-form-item :label="searchFormData.supplier_id.label" prop="supplier_id.value">
                          <!-- 商家 -->
                          <el-select
                            class="qf_select"
                            popper-class="own_popper"
                            filterable
                            v-model="searchFormData.supplier_id.value"
                            :placeholder="searchFormData.supplier_id.placeholder"
                            @visible-change="getImportCompanyId($event, 'supplier')"
                            remote
                            :remote-method="remoteMethod"
                            :loading="remoteLoading"
                          >
                            <el-option
                              v-for="item in supplierArr"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value.toString()"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="langEnv">
                        <el-form-item :label="searchFormData.brand_id.label" prop="brand_id.value">
                          <!-- 品牌 -->
                          <el-select
                            class="qf_select"
                            popper-class="own_popper"
                            filterable
                            v-model="searchFormData.brand_id.value"
                            :placeholder="searchFormData.brand_id.placeholder"
                            @visible-change="getImportCompanyId($event, 'brand')"
                            remote
                            :remote-method="remoteMethod"
                            :loading="remoteLoading"
                          >
                            <el-option
                              v-for="item in brandArr"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value.toString()"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="langEnv">
                        <el-form-item label="GTIN" prop="gtin.value">
                          <!-- GTIN -->
                          <el-input
                            class="qf_input"
                            v-model="searchFormData.gtin.value"
                            :placeholder="searchFormData.gtin.placeholder"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="langEnv">
                        <el-form-item :label="searchFormData.sku.label" prop="sku.value">
                          <!-- 系统货号俄文 -->
                          <el-input
                            class="qf_input"
                            v-model="searchFormData.sku.value"
                            :placeholder="searchFormData.sku.placeholder"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="langEnv">
                        <el-form-item :label="searchFormData.supplier_sku.label" prop="supplier_sku.value">
                          <!-- 商家货号俄文 -->
                          <el-input
                            class="qf_input"
                            v-model="searchFormData.supplier_sku.value"
                            :placeholder="searchFormData.supplier_sku.placeholder"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="langEnv">
                        <el-form-item label="Product Id" prop="product_id.value">
                          <!-- product_id -->
                          <el-input
                            class="qf_input"
                            v-model="searchFormData.product_id.value"
                            :placeholder="searchFormData.product_id.placeholder"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </el-scrollbar>
            </div>
            <div class="modal-footer">
              <!-- 取消 -->
              <el-button type="default" @click="resetForm(serachFormRef)">{{ $t("merak.reset") }}</el-button>
              <!-- 搜索 -->
              <el-button type="primary" @click="searchData">{{ $t("merak.search") }}</el-button>
              <!-- 保存搜索方案 -->
              <el-button plain type="primary" v-if="searchProp.closePlan" @click="showPlanModal">
                {{ $t("merak.save_search_scheme") }}
              </el-button>
            </div>
          </div>
        </template>
      </searchBarCompoent>

      <!-- table组件 -->
      <!-- 表格组件 -->
      <!-- 这里支持序号，复选框 箭头点击扩展 :column-type="[ 'index','selection', 'expand', { type: 'handle', width: 65, slot: 'handler' }]" -->
      <MerakXTable
        ref="tableRef"
        v-bind="tablePayload"
        :batch-click="handleBatchClick"
        :handler-click="handleHanderClick"
        :query-columns="queryColumns"
        :query-data="queryData"
        style="margin-top: 28px"
        :awaitParams="true"
        :column-type="tableColumnType"
      >
        <template v-if="isEmpty" #empty>
          <div class="empty_box">
            <img class="empty_img" :src="EmptyImage" />
            <div class="empty_msg">{{ isEmptyMsg }}</div>
          </div>
        </template>
        <template #custom-handler="{ row }">
          <!-- 货号概览俄文 -->
          <el-button type="primary" link @click="quickShowFn(row, {})">{{ $t("base_markings.number_overview") }}</el-button>
        </template>
      </MerakXTable>
    </div>

    <quickViewComponet></quickViewComponet>
  </div>
</template>
<script lang="ts" setup name="GTINManagement">
import searchBarCompoent from "@/components/SearchBar";
import selectedParams from "@/components/SearchBar/components/selectedParams.vue";
import {
  baseGtinLeftMenu,
  baseGtinSearchItem,
  baseGtinList,
  baseGtinTableHeader
} from "@/api/modules/markingManagement/supplier-gtin/index";
import { baseSsccSearchItem } from "@/api/modules/markingManagement/supplier-sscc/index";
import { ref, watch, onMounted, reactive, getCurrentInstance, computed } from "vue";
import type { FormInstance } from "element-plus";
const { proxy } = getCurrentInstance();
import { ElTree } from "element-plus";
import MerakXTable, { MerakXTableInstance, MerakXTableProps } from "@/components/MerakXTable";
var $t = proxy.$t; //language
// 左侧树组件及数据获取
interface Tree {
  [key: string]: any;
}

const state = reactive<{
  statParams: Record<string, string>;
  columnType: Array;
}>({
  statParams: {},
  columnType: []
});
// 搜索
const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();
const defaultProps = {
  children: "childs",
  label: "label"
};
watch(filterText, val => {
  treeRef.value!.filter(val);
});
const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.includes(value);
};
const treeData = ref<any[]>([]);
const currentId = ref<any>("");
let reloadBool = ref(true);
// 获取树
const defaultCheckedKeys = ref<any>([]);
const getBaseGtinLeftMenu = () => {
  const params = {};
  reloadBool.value = false;
  baseGtinLeftMenu(params).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      treeData.value = data.list;
      // 往左側樹第一項添加全部标签选项
      treeData.value.unshift({
        label: $t("base_markings.all_label"),
        value: 0
      });
      reloadBool.value = true;
      setTimeout(() => {
        currentId.value = 0;
        const searchParams = new URLSearchParams(window.location.search);
        const type_id = Number(searchParams.get("type_id"));
        if (type_id != null) {
          currentId.value = type_id;
          treeRef.value?.setCheckedKeys([type_id]);
          defaultCheckedKeys.value = [type_id];
          // tableRef.value?.reloadData();
          queryForm.type_id = type_id;
          tablePayload.params!.type_id = type_id;
          searchData();
        }
      }, 0);
    }
  });
};

// 右侧
const import_companyArr = ref<any>([]); // 标签申请公司
const supplierArr = ref<any>([]); // 商家
const brandArr = ref<any>([]); // 品牌
// 表单查询条件
const searchFormData = reactive<any>({
  our_company: {
    //申请公司性质俄文
    type: "radio",
    label: $t("base_markings.our_company"),
    value: "",
    placeholder: ""
  },
  import_company_id: {
    //标签申请公司俄文
    type: "select",
    label: $t("base_markings.km_import_company"),
    value: "",
    placeholder: $t("base_markings.please_select"),
    options: []
  },
  supplier_id: {
    //商家俄文
    type: "select",
    label: $t("base_markings.supplier_name"),
    value: "",
    placeholder: $t("base_markings.please_select"),
    options: []
  },
  brand_id: {
    //品牌俄文
    type: "select",
    label: $t("base_markings.brand_name"),
    value: "",
    placeholder: $t("base_markings.please_select"),
    options: []
  },
  gtin: {
    //gtin
    type: "input",
    label: "GTIN",
    value: "",
    placeholder: $t("base_markings.please_enter")
  },
  sku: {
    //系统货号俄文
    type: "input",
    label: $t("base_markings.sku"),
    value: "",
    placeholder: $t("base_markings.please_enter")
  },
  supplier_sku: {
    //商家货号俄文
    type: "input",
    label: $t("base_markings.supplier_sku"),
    value: "",
    placeholder: $t("base_markings.please_enter")
  },
  product_id: {
    //product_id
    type: "input",
    label: "Product Id",
    value: "",
    placeholder: $t("base_markings.please_enter")
  }
});

const queryForm = reactive({
  type_id: 0, // 左侧树value，默认0 全部
  keyword: "" // 自定义搜索的快捷keyword
}) as any;

//根据语言切换布局
const langEnv = proxy.$t("lang") == "ru" ? 8 : 6;

// 获取搜索项数据
const searchItemList = ref<any>({});
const geBaseSsccSearchItem = () => {
  const params = {};
  baseSsccSearchItem(params).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      console.log(data, "geBaseSsccSearchItem");
      searchItemList.value = data;
      // import_companyArr.value = data.all;
      // supplierArr.value = data.supplier_id;
      // brandArr.value = data.brand_id;
    }
  });
};

// 输入文字搜索
const remoteLoading = ref<any>(false);
const remoteMethod = (query: string) => {
  // console.log(query, companyType.value, "queryquery");
  if (query) {
    remoteLoading.value = true;
    let list = [];
    if (companyType.value == "import_company") {
      // 证明点击的是申请标签公司列表，需要判断我司还是外部
      if (searchFormData.our_company.value == $t(`base_markings.our_company_label`)) {
        // 我司
        list = searchItemList.value.qifa;
      } else if (searchFormData.our_company.value == $t(`base_markings.external_label`)) {
        // 外部
        list = searchItemList.value.external;
      } else {
        // 什么都没选，走全部
        list = searchItemList.value.all;
      }
      setTimeout(() => {
        remoteLoading.value = false;
        import_companyArr.value = list.filter(item => {
          return item.label.toLowerCase().includes(query.toLowerCase());
        });
        searchFormData.import_company_id.options = import_companyArr.value; // 给搜索高级搜索窗重新赋值
      }, 200);
    } else if (companyType.value == "supplier") {
      // 商家
      list = searchItemList.value.supplier_id;
      setTimeout(() => {
        remoteLoading.value = false;
        supplierArr.value = list.filter(item => {
          return item.label.toLowerCase().includes(query.toLowerCase());
        });
        searchFormData.supplier_id.options = supplierArr.value; // 给搜索高级搜索窗重新赋值
      }, 200);
    } else if (companyType.value == "brand") {
      // 品牌
      list = searchItemList.value.brand_id;
      setTimeout(() => {
        remoteLoading.value = false;
        brandArr.value = list.filter(item => {
          return item.label.toLowerCase().includes(query.toLowerCase());
        });
        searchFormData.brand_id.options = brandArr.value; // 给搜索高级搜索窗重新赋值
      }, 200);
    }
  } else {
    // 选择完后，重新渲染
    import_companyArr.value = searchItemList.value.all.filter(item => {
      return item.value == searchFormData.import_company_id.value;
    });
    supplierArr.value = searchItemList.value.supplier_id.filter(item => {
      return item.value == searchFormData.supplier_id.value;
    });
    brandArr.value = searchItemList.value.brand_id.filter(item => {
      return item.value == searchFormData.brand_id.value;
    });
    // import_companyArr.value = [];
    // supplierArr.value = [];
    // brandArr.value = [];
  }
};

// 获取搜索项数据

const getBaseGtinSearchItem = type => {
  // $t(`base_markings.our_company_label`)-我司 value qifa
  // $t(`base_markings.external_label`)-外部 value importCompany
  // 不选时传 全部-importCompany
  const our_company =
    searchFormData.our_company.value == $t(`base_markings.our_company_label`)
      ? "qifa"
      : searchFormData.our_company.value == $t(`base_markings.external_label`)
        ? "external"
        : "importCompany";
  const params = {
    type: type, // 筛选类型；import_company-标签申请公司；supplier-商家；brand-品牌
    our_company: our_company // 1-我司；2-外部
  };
  baseGtinSearchItem(params).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      console.log(data, 11111);
      if (type == "import_company") {
        // 标签申请公司
        import_companyArr.value = data;
        searchFormData.import_company_id.options = data; // 搜索项配置数据列表赋值
      } else if (type == "supplier") {
        // 商家
        supplierArr.value = data;
        searchFormData.supplier_id.options = data; // 搜索项配置数据列表赋值
      } else if (type == "brand") {
        // 品牌
        brandArr.value = data;
        searchFormData.brand_id.options = data; // 搜索项配置数据列表赋值
      }
    }
  });
};

const companyType = ref<any>("");
const getImportCompanyId = (visible, type) => {
  companyType.value = type;
  console.log(visible, type);
  // visible 判断select是否被打开，打开的话加载数据
  if (visible == true) {
    // getBaseGtinSearchItem(type);
  }
};

// 获取下拉数据
const import_companyLoading = ref<any>(false);
const remoteDataMethod = (query: string) => {
  if (query) {
    import_companyLoading.value = true;
  }
};

// 切换radio 清空下拉选项数据
const changeOurCompany = () => {
  // import_companyArr.value = [];
  // supplierArr.value = [];
  // brandArr.value = [];
  import_companyArr.value = [];
  searchFormData.import_company_id.value = "";
  searchFormData.import_company_id.options = [];
};

const searchBarEle = ref<any>();
// 关闭高级搜索框
const searchCloseModal = (): Promise<void> => {
  setTimeout(() => {
    searchBarEle.value.modalHide();
  }, 500);
  return Promise.resolve();
};

//打开搜索方案弹出
const showPlanModal = () => {
  searchBarEle.value.showPlanModal();
};

// 重置表单
const serachFormRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  // 取消选中tree节点
  treeRef.value!.setCurrentKey();
  queryForm.type_id = 0;
  searchData();
};

// 查询列表
const searchData = (val?) => {
  queryForm.keyword = val?.type_name;
  searchCloseModal();
  const params = {
    ...queryForm
  };
  Object.keys(searchFormData).map(key => {
    if (searchFormData[key].value != undefined) {
      // key是our_company无效，不用查
      if (key != "our_company") {
        params[key] = searchFormData[key].value + "";
      }
    }
  });
  // tablePayload.params = computed(() => ({ ...params }));
  tablePayload.params = { ...params, type_id: tablePayload.params?.type_id };
};

// 设置table的操作插槽
const tableColumnType = computed(() => {
  const columnType: MerakXTableProps["columnType"] = [
    {
      type: "handle",
      width: 140,
      slot: "custom-handler"
    }
  ];
  return columnType;
});

const authArr = ref(null); //权限
// 动态计算表格的外部筛选数据
const params = computed(() => ({ ...state.statParams }));
const columnTypeNew = computed(() => state.columnType);
// 表格配置属性
const tablePayload = reactive<MerakXTableProps>({
  // 列设置存储的数据对照值
  columnsByStore: [],
  columnMinWidth: 140,
  // 表格行数据的唯一 key, 跟后端同步
  rowKey: "user_id",
  enabledExport: true, //导出
  // 初始化的外部筛选数据
  params: {},
  // 等待最后一次请求
  awaitParams: true,
  // 展示选中列及操作列, 可通过传入对象形式扩展特殊列的渲染插槽, 例如
  columnType: columnTypeNew,
  // 展示选中列及操作列, 可通过传入对象形式扩展特殊列的渲染插槽, 例如
  // ["multiple", { type: 'handle', width: 200, slot: 'custom_slot_name' | ({ row })=> Component }]
  // columnType: ["multiple", "handle"],
  // 批量操作选项
  batches: [{ type: "delete", text: "批量删除", color: "red" }],
  // 操作列选项
  handles: [{ type: "delete", text: "删除", color: "red" }]
});

// 获取列表
const getData = () => {
  const params = {
    ...queryForm
  };
  Object.keys(searchFormData).map(key => {
    params[key] = searchFormData[key].value + "";
  });
  baseGtinList(params).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      console.log(data.table_data, 123);
    }
  });
};

// 处理table动态表头
const queryColumns: MerakXTableInstance["queryColumns"] = async () => {
  // 初始化接口需要传入队列 loading 暴露的 id
  return baseGtinTableHeader({}).then(({ code, data }) => {
    // queryForm.pageSize = data.pageSize;
    if (code == ResultEnum.SUCCESS) {
      searchBarEle.value?.getPlanList(data.table_id);
      //获取表头后使用tableid 获取搜索方案
      // queryFilterOptions(data);
      // 克隆表头数据作为列设置的对照数据
      tablePayload.columnsByStore = JSON.parse(JSON.stringify(data.columns));
      return {
        ...data,
        columns: [...data.columns].map(column => {
          switch (column.field) {
            case "GTIN":
              // 设置最小宽度
              column.width = 160;
              // 固定列
              column.fixed = "left";
              column.slots = { default: ({ row }) => row.gtin };
              return column;
            case "label_applicant":
              // 申请标签公司name
              column.slots = { default: ({ row }) => row.import_company_name };
              return column;
            case "product_type":
              // 商品类型name
              column.slots = { default: ({ row }) => row.product_type_name };
              return column;
            case "gtin_status":
              // 商品类型name
              column.slots = { default: ({ row }) => row.gtin_status[0] };
              return column;
            default:
              return column;
          }
        })
      };
    }
  });
};

/**
 * 获取表格数据
 * @param page 分页参数
 * @param sorts 多重排序参数
 * @param filters 表头筛选参数
 * @param from 外部由 tablePayload.params 传入的自定义参数
 */
import EmptyImage from "@/assets/images/empty_img.png"; // 空table佔位圖
const isEmptyMsg = ref<any>(""); // 空table展示文字
const isEmpty = ref<any>(false);
const queryData: MerakXTableInstance["queryData"] = async ({ page, sorts, from }) => {
  // 创建请求表格数据的参数
  const params: Record<string, any> = {};
  // 如果有分页数据
  if (!!page) {
    Object.assign(params, { ...page });
  }
  // 如果有排序数据
  if (!!sorts) {
    for (let sort of sorts.values()) {
      console.log(sort);
    }
  }
  // 如果有自定义参数
  if (!!from) {
    for (let key of Object.keys(from)) {
      const item = from[key];
      !!item && (params[key] = item);
    }
  }

  // 初始化接口需要传入队列 loading 暴露的 id
  return baseGtinList(params).then(({ code, data, auth_list }) => {
    //  ========权限判断 start  ======

    if (auth_list) {
      authArr.value = auth_list;
      if (auth_list?.editGoodsType.show) {
        state.columnType = [{ type: "handle", width: proxy.$t("lang") == "zh" ? 100 : 200, slot: "handler" }];
      }
    }
    // ========权限判断 end  ======
    if (code == ResultEnum.SUCCESS) {
      if (page.currentPage * page.pageSize > 10000) {
        if (data.table_data.length == 0) {
          isEmptyMsg.value = data.msg;
          isEmpty.value = true;
        } else {
          isEmpty.value = false;
        }
      } else {
        isEmpty.value = false;
      }
      console.log(data);
      //   expirationReminder.value = Number(data.dueContract) || 0;
      return data.table_data;
    }
  });
};

/**
 * 表格批量操作事件触发
 * @param type 同 tablePayload.batched 子项的 type
 * @param mode 表格选中的模式  current: 当前页  all: 所有页
 * @param selectedKeys 表格当前页选中模式下选中的行数据 key 的集合, 表格所有页选中模式下未选中的行数据 key 的集合
 */
const handleBatchClick: MerakXTableInstance["batchClick"] = async ({ type, mode, selectedKeys }) => {
  switch (type) {
    case "delete":
      return {
        // 是否刷新表格, 默认 false, 可选参数
        refresh: false,
        // 是否重置表格(分页、排序), 默认 false, 可选参数
        reset: false
      };
    default:
      return;
  }
};

/**
 * 表格操作列事件触发
 * @param type 同 tablePayload.handles 子项的 type
 * @param params 表格操作数据, 可结构关于操作行的数据 { row, rowIndex, rowId }
 */
const handleHanderClick: MerakXTableInstance["handlerClick"] = async ({ type, params }) => {
  switch (type) {
    case "delete":
      alert("delete");
      // 是否刷新表格, 默认 false, 可选参数
      return true;
    case "caht":
      alert("caht");
      // 是否刷新表格, 默认 false, 可选参数
      return true;
    default:
      return;
  }
};

// 点击左侧树组件，切换类型
const handleNodeClick = (data, node) => {
  // 构建新的URL
  const newUrl = new URL(window.location.href);
  newUrl.searchParams.set("type_id", data.value);
  // 使用pushState更新浏览器历史记录
  window.history.pushState({}, "", newUrl.toString());
  resetForm(serachFormRef.value); // 重置右侧筛选项
  // console.log(node);
  if (node.data.value) {
    // 确定点击的是子节点，而不是根节点
    queryForm.type_id = data.value;
    tablePayload.params!.type_id = data.value;
    searchData();
  } else {
    if (node.data.value == 0) {
      // 代表点击的是全部
      queryForm.type_id = 0;
      tablePayload.params!.type_id = undefined;
      searchData();
    }
  }
};

/**
 * @description: 快速查看
 *
 */
import useQuickView from "@/views/goodsArchive/goodsList/components/QuickView/index";
import { ResultEnum } from "@/enums/httpEnum";
const { quickViewComponet, quickShowFn } = useQuickView(proxy);

onMounted(() => {
  getBaseGtinLeftMenu(); // 获取左侧树
  geBaseSsccSearchItem(); // 获取高级搜索项
});
</script>
<style lang="scss" scoped>
.action_btn {
  font-size: var(--merak-table-size);
  display: flex;
  .action_item {
    cursor: pointer;
    &:first-child {
      color: var(--el-color-primary);
      margin-right: 30px;
    }
    &:last-child {
      color: var(--el-color-danger);
    }
  }
}
.merak-aside {
  display: flex;
  flex-direction: column;
  & > :not(:first-child) {
    margin-top: var(--merak-space);
  }
  & > .tree-wrapper {
    flex: 1;
    min-height: 0;
  }
  .title {
    font-size: 16px;
  }
}
/* 选中节点的样式 */

.empty_box {
  .empty_img {
    width: 220px;
    height: 220px;
  }
}
.empty_msg {
  color: #a0a3a9;
  padding-bottom: 50px;
  font-size: 13px;
}
</style>
<style>
.supplier-gtin .el-tree .el-tree-node:focus > .el-tree-node__content {
  color: #fff !important;
  background-color: var(--el-color-primary) !important;
}
.supplier-gtin .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  color: #fff !important;
  background-color: var(--el-color-primary) !important;
}
</style>
